<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>schedule</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="renderer" content="webkit">
		<!-- 设置缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
		<!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 微软的老式浏览器 -->
		<meta name="MobileOptimized" content="320">
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait">
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="yes">
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true">
		<!-- UC应用模式 -->
		<meta name="browsermode" content="application">
		<!-- QQ应用模式 -->
		<meta name="x5-page-mode" content="app">
		<!-- windows phone 点击无高光 -->
		<meta name="msapplication-tap-highlight" content="no">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="stylesheet" href="../css/index.css">
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		#schedule-box{
			margin: 0 auto;
			padding:20px;
			font-size: 13px;
		}
		.schedule-hd{
			display: flex;
			justify-content: space-between;
			padding: 0 15px;
		}
		.today{
			flex: 1;
			text-align: center;
		}
		.ul-box{
			overflow: hidden;
		}
		.ul-box > li{
			float: left;
			width: 14.28%;
			text-align: center;
			padding: 5px 0;
		}
		.other-month{
			color: #999999;
		}
		.current-month{
			color: #333333;
		}
		.today-style{
			border-radius: 50%;
			background: #58d321;
		}
		.arrow{
			cursor: pointer;
		}
		.dayStyle{
			display: inline-block;
			width: 35px;
			height: 35px;
			border-radius: 50%;
			text-align: center;
			line-height: 35px;
			cursor: pointer;
		}
		.current-month > .dayStyle:hover{
			background: #00BDFF;
			color: #ffffff;
		}
		.today-flag{
			background: #00C2B1;
			color: #fff;
		}
		.boxshaw{
			box-shadow: 2px 2px 15px 2px #e3e3e3;
		}
		.selected-style {
			background: #00BDFF;
			color: #ffffff;
		}
		#h3Ele{
			text-align: center;
			padding: 10px;
		}
	</style>
</head>
<body>
	
	<div id='schedule-box' class="boxshaw">
		
	</div>
	
</body>
<script type="text/javascript" src="../assets/js/schedule.js" ></script>
<script>
	var mySchedule = new Schedule({
		el: '#schedule-box',
		//date: '2018-9-20',
		clickCb: function (y,m,d) {
			document.querySelector('#h3Ele').innerHTML = '日期：'+y+'-'+m+'-'+d	
		},
		nextMonthCb: function (y,m,d) {
			document.querySelector('#h3Ele').innerHTML = '日期：'+y+'-'+m+'-'+d	
		},
		nextYeayCb: function (y,m,d) {
			document.querySelector('#h3Ele').innerHTML = '日期：'+y+'-'+m+'-'+d	
		},
		prevMonthCb: function (y,m,d) {
			document.querySelector('#h3Ele').innerHTML = '日期：'+y+'-'+m+'-'+d	
		},
		prevYearCb: function (y,m,d) {
			document.querySelector('#h3Ele').innerHTML = '日期：'+y+'-'+m+'-'+d	
		}
	});
</script>
</html>